<template>
	<view class="container">
		<view class="text-box" scroll-y="false">
			<text class="title">{{title}}</text>
		</view>
		<view class="text-box timer" scroll-y="false">
			<text class="timer">考试时间:{{minutes}}分钟</text>
		</view>
		<view>
			<label class="uni-list-cell">
			</label>
		</view>
		<view>
			<form @submit="formSubmit" @reset="formReset">
				<view v-for="(q, index) in questionsList" :key="index">
					<text>{{(index+1)}}.{{q.title}}</text>
					<radio-group :name="'q'+index">
						<label class="uni-list-cell uni-list-cell-pd" v-if="q.contentA!=null">
							<view>
								<radio value="A" :disabled="flags[index]"/>A.{{q.contentA}}
							</view>
						</label>

						<label class="uni-list-cell uni-list-cell-pd" v-if="q.contentB!=null">
							<view>
								<radio value="B" :disabled="flags[index]"/>B.{{q.contentB}}
							</view>
						</label>
						<label class="uni-list-cell uni-list-cell-pd" v-if="q.contentC!=null">
							<view>
								<radio value="C" :disabled="flags[index]"/>C.{{q.contentC}}
							</view>
						</label>
						<label class="uni-list-cell uni-list-cell-pd" v-if="q.contentD!=null">
							<view>
								<radio value="D" :disabled="flags[index]"/>D.{{q.contentD}}
							</view>
						</label>
						<label class="uni-list-cell uni-list-cell-pd" v-if="q.contentE!=null">
							<view>
								<radio value="E" :disabled="flags[index]"/>E.{{q.contentE}}
							</view>
						</label>
						<label class="uni-list-cell uni-list-cell-pd" v-if="q.contentF!=null">
							<view>
								<radio value="F" :disabled="flags[index]"/>F.{{q.contentF}}
							</view>
						</label>
					</radio-group>
				</view>
				<view class="uni-btn-v">
					<button formType="submit" :disabled="!canExam">提交试卷</button>
				</view>
			</form>
		</view>

		<!--显示考试结果的一个模态窗口-->
		<uni-popup :show="showResult" position="middle" mode="fixed" @hidePopup="togglePopup('')">
			<text>本次测试分数是：{{yousScore}}</text>
			<scroll-view :scroll-y="true" class="uni-center center-box">
				<view v-for="(ans, index) in answers" :key="index" class="uni-list-item">
					第{{index+1}}题： {{ans}}, 您的答案：<span :class="ans==yoursAnswers[index]?'correctStyle':'errorStyle'">
						{{yoursAnswers[index]}} </span>
				</view>
			</scroll-view>
		</uni-popup>
	</view>

</template>
<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue' //引入模态窗口的组件
	export default {
		//使用组件
		components: {
			uniPopup
		},
		data() {
			return {
				canExam: true, //是否能考试
				showResult: false, //是否显示考试结果
				yousScore: 0, //你的考试成绩
				cid: '', //章节编号
				title: '', //考试的标题
				minutes: 0, //考试时间
				totalScore: 0, //总分数
				number: 0, //试题数量
				perScore: 0, //每题的分数
				questionsList: [], //试题集合
				answers: [], //正确答案集合
				yoursAnswers: [], //你的答案的集合
				flags: [false,false,false,false,false,false]
			}
		},
		onLoad(options) {
			//this.cid = this.$route.params.cid;
			this.cid = options.cid; //获取要考试的章节编号
			this.initPaperView(); //初始化试题


		},
		methods: {
			initPaperView() {
				console.log('章节编号' + this.cid + '初始化试卷资料...');
				uni.request({
					url: this.websiteUrl+'/examdemo/questions/initPaperViewByCid/' + this.cid, //仅为示例，并非真实接口地址。
					method: 'GET',
					data: {},
					success: (res) => {
						console.log(res.data);
						this.title = res.data.data.title;
						this.minutes = res.data.data.minutes;
						this.questionsList = res.data.data.questionsList;
						console.log("服务器返回试题数量：" + res.data.data.questionsList.length);
						if (res.data.data.questionsList.length < 5) {
							this.canExam = false;
						}
						this.answers = res.data.data.answers;
						this.perScore = res.data.data.perScore;

					},
					fail: () => {},
					complete: () => {}
				});
			},
			
			formSubmit: function(e) {
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				var result = e.detail.value
				console.log(e.detail.value)
				var score = 0
				
				//提交提交试卷的避免学生重复提交，把试卷按钮组设置不可用
				for(let i=0;i<this.flags.length;i++){
					this.$set(this.flags,i,true);
				}
				
				for(let j=0;j< this.answers.length;j++){
					if(j==0){
						this.yoursAnswers.push(result.q0);
					}
					if(j==0 && this.answers[j] == result.q0){
						score +=this.perScore;
						
					}
					if(j==1){
						this.yoursAnswers.push(result.q1);
					}
					if(j==1 && this.answers[j] == result.q1){
						score +=this.perScore;
					}
					
					if(j==2){
						this.yoursAnswers.push(result.q2);
					}
					if(j==2 && this.answers[j] == result.q2){
						score +=this.perScore;
					}
					if(j==3){
						this.yoursAnswers.push(result.q3);
					}
					if(j==3 && this.answers[j] == result.q3){
						score +=this.perScore;
					}
					if(j==4){
						this.yoursAnswers.push(result.q4);
					}
					if(j==4 && this.answers[j] == result.q4){
						score +=this.perScore;
					}
				}
				
				console.log('本次考试分数是：'+score);
				this.yousScore = score;
				this.showResult = true; //显示结果
				
				
			},
			formReset: function(e) {
				console.log('清空试卷了....');
			},
			
			togglePopup() {
				this.showResult = false
			}
		}
	}
</script>

<style>
	/*正确的样式*/
	.correctStyle {
		color: #1AAD19;
	}

	.errorStyle {
		color: #ff0000;
	}

	.container {
		background-color: #F2f2f2;
	}

	.text-box {
		text-align: center;
	}

	.text-box .title {
		text-align: center;
		color: #555555;
		font-size: 50upx;
	}

	.text-box .timer {
		text-align: center;
		font-size: 30upx;
		color: #8F8F94;
	}

	.address-list {
		width: 100%;
		background-color: #fff;
		margin-top: 20upx;
		padding-bottom: 100upx;
	}

	.address-list .a-address {
		width: 720upx;
		margin-left: 30upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30upx 0;
		border-bottom: 1upx solid #eee;
	}

	.a-address .left-text {
		width: 610upx;
		box-sizing: border-box;
		padding-left: 58upx;
	}

	.a-address .left-text.active {
		background: url() no-repeat left center;
		background-size: 28upx auto;
	}

	.a-address .left-text .name-tel {
		margin-bottom: 20upx;
	}

	.a-address .left-text .address-box {
		font-size: 24upx;
		color: #888888;
		line-height: 36upx;
	}

	.a-address .right-edit {
		width: 109upx;
		height: 100%;
		padding: 50upx 0 50upx 58upx;
		box-sizing: border-box;
		background: url() no-repeat 43upx center;
		background-size: 35upx auto;
	}

	.bottom-box {
		position: fixed;
		width: 100%;
		bottom: 0;
		font-size: 28upx;
		color: #000000;
		border-top: 1upx solid #eee;
		height: 100upx;
		line-height: 100upx;
		background: #fff url() no-repeat 705upx center;
		background-size: 15upx auto;
	}

	.bottom-box .add-btn {
		margin-left: 30upx;
		padding-left: 70upx;
		background: url() no-repeat left center;
		background-size: 40upx auto;
	}
</style>
